<template>
  <div id="app" class="ordering">
    <!-- 导航栏 -->
    <nav class="bg-[#2c2c2c] text-white p-4 shadow-md">
      <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-2xl font-bold tracking-wider">张仲景 - 医圣传奇</h1>
      </div>
    </nav>

    <!-- 英雄部分 -->
    <section class="bg-cover bg-center py-32 relative" style="background-image: url('https://picsum.photos/1920/1080');">
      <div class="absolute inset-0 bg-black opacity-30"></div> <!-- 降低黑色遮罩的透明度 -->
      <div class="container mx-auto text-center text-white relative z-10">
        <h2 class="text-5xl font-bold mb-6 leading-tight">张仲景 - 医圣，医学瑰宝</h2>
        <p class="text-xl mb-8">他以卓越的医学智慧和济世情怀，为中医发展奠定了坚实基础。</p>
        
      </div>
    </section>

    <!-- 生平事迹部分 -->
    <section class="container mx-auto py-16">
      <h2 class="text-4xl font-bold text-center mb-10 text-[#333]">生平事迹</h2>
      <div class="flex flex-wrap justify-center gap-10">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
            <h3 class="text-2xl font-bold mb-4 text-[#222]">出身仕族，学医立志</h3>
            <p class="text-lg text-gray-700">张仲景出身于官僚家庭，自幼勤奋好学，对医学有着浓厚的兴趣。他从小接触各种典籍，立志要成为一名济世救人的良医，为解除民众的疾苦而努力。</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
            <h3 class="text-2xl font-bold mb-4 text-[#222]">乱世行医，救民水火</h3>
            <p class="text-lg text-gray-700">东汉末年，战乱频繁，疫病流行。张仲景在这样的乱世中，毅然放弃仕途，专注于医学实践。他深入民间，广泛收集医方，为百姓诊治疾病，积累了丰富的临床经验。</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
            <h3 class="text-2xl font-bold mb-4 text-[#222]">著书立说，传承医术</h3>
            <p class="text-lg text-gray-700">张仲景博采众长，结合自己的临床经验，撰写了《伤寒杂病论》。这部医学巨著系统地阐述了多种疾病的病因、病机、诊断和治疗原则，为中医临床学的发展做出了重要贡献。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 医学成就部分 -->
    <section class="bg-gray-100 py-16">
      <div class="container mx-auto text-center">
        <h2 class="text-4xl font-bold mb-10 text-[#333]">医学成就</h2>
        <div class="flex flex-wrap justify-center gap-10">
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
              <img src="https://t14.baidu.com/it/u=237534546,2612512579&fm=224&app=112&f=JPEG?w=375&h=500" alt="伤寒杂病论相关图片" class="w-full h-36 object-cover mb-6 rounded-lg">
              <h3 class="text-2xl font-bold mb-4 text-[#222]">《伤寒杂病论》的撰写</h3>
              <p class="text-lg text-gray-700">《伤寒杂病论》是我国第一部理法方药完备的医学经典著作，它确立了辨证论治的原则，为中医临床治疗提供了重要的理论依据和实践指导，对后世医学的发展产生了深远影响。</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
              <img src="https://img2.baidu.com/it/u=2368102325,1469094604&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=668" alt="中医诊断相关图片" class="w-full h-36 object-cover mb-6 rounded-lg">
              <h3 class="text-2xl font-bold mb-4 text-[#222]">辨证论治的创立</h3>
              <p class="text-lg text-gray-700">张仲景创立的辨证论治方法，通过对疾病的症状、体征等进行综合分析，判断疾病的本质和发展阶段，从而制定出针对性的治疗方案。这种方法体现了中医的整体观念和个体化治疗思想，至今仍被广泛应用。</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
              <img src="https://img1.baidu.com/it/u=180514491,2087008797&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="方剂学相关图片" class="w-full h-36 object-cover mb-6 rounded-lg">
              <h3 class="text-2xl font-bold mb-4 text-[#222]">方剂学的贡献</h3>
              <p class="text-lg text-gray-700">《伤寒杂病论》中记载了大量有效的方剂，这些方剂配伍严谨，疗效显著，被后世称为“经方”。张仲景对方剂学的贡献，不仅丰富了中医的治疗手段，也为中医方剂的发展和应用奠定了基础。</p>
            </div>
          </div>
        </div>
        <!-- 饼图展示区域 -->
        <div id="pie-chart-container" class="w-full md:w-1/2 lg:w-1/3 p-4" style="width: 100%;">
          <div class="bg-white shadow-lg rounded-lg p-8 transition duration-300 hover:shadow-2xl">
            <h3 class="text-2xl font-bold mb-4 text-[#222]">医学成就占比</h3>
            <div id="pie-chart" class="w-full h-64"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 影响与传承部分 -->
    <section class="container mx-auto py-16">
      <h2 class="text-4xl font-bold text-center mb-10 text-[#333]">影响与传承</h2>
      <p class="text-lg mb-8 text-gray-700">张仲景的医学思想和成就对中医的发展产生了深远的影响，被后世尊称为“医圣”。他的著作《伤寒杂病论》被历代医家奉为经典，不断被研究和传承，成为中医临床学的重要基础。</p>
      <div class="flex justify-center">
        <img src="https://img1.baidu.com/it/u=3153163220,1470631762&fm=253&fmt=auto&app=138&f=JPEG?w=818&h=500" alt="中医传承相关图片" class="w-1/2 md:w-1/3 lg:w-1/4 my-8 rounded-lg shadow-md">
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-[#2c2c2c] text-white py-8">
      <div class="container mx-auto text-center">
        <p>&copy; 关于张仲景的网页</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import echarts from '@/assets/echarts.min.js';

export default defineComponent({
  data() {
    return {};
  },
  mounted() {
    this.initPieChart();
  },
  methods: {
    initPieChart() {
      const myChart = echarts.init(document.getElementById('pie-chart'));
      const option = {
        // 标题样式优化
        title: {
          text: '张仲景医学成就占比',
          subtext: '',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        // 提示框样式优化
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          backgroundColor: 'rgba(51, 51, 51, 0.8)',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        // 图例样式优化
        legend: {
          orient: 'horizontal',
          bottom: 10,
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 14
          }
        },
        series: [
          {
            name: '医学成就',
            type: 'pie',
            radius: ['40%', '60%'], // 调整为环形饼图，使展示更完整
            avoidLabelOverlap: true,
            label: {
              show: true,
              formatter: '{b}: {c} ({d}%)',
              position: 'outside',
              textStyle: {
                color: '#333'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [
              { value: 40, name: '《伤寒杂病论》的撰写' },
              { value: 30, name: '辨证论治的创立' },
              { value: 30, name: '方剂学的贡献' }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
});
</script>

<style scoped>
#app .container {
  max-width: 1200px;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

section {
  padding: 16px 0;
}

footer {
  text-align: center;
}

/* 图片样式 */
img {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>